<?xml version="1.0" encoding="UTF-8"?>
<ui:component xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">

	<ui:composition template="/pages/templates/layout_principal.xhtml">
		<ui:define name="message">
			<rich:messages id="mensagens" globalOnly="true" showSummary="true" showDetail="true" ajaxRendered="false">
			</rich:messages>
		</ui:define>
		
		<ui:define name="body" width="100%">
			<h:form>
				<h:panelGrid styleClass="titulo">
					<h:outputText styleClass="titulo" value="#{menuControl.nomeProjetoSelecionado} - Registrar Execução" />
				</h:panelGrid>
				
				
				<br/>
				<rich:panel header="Detalhes da Atividade ##{registrarExecucaoControl.atividade.numero}">
					<h:panelGrid columns="2">
						<h:panelGroup>
							Iteração: 
						</h:panelGroup>
						<h:panelGroup>
							#{registrarExecucaoControl.iteracao.fase.faseRup.nome} # #{registrarExecucaoControl.atividade.iteracao.numero}
						</h:panelGroup>
						<h:panelGroup>
							Nome: 
						</h:panelGroup>
						<h:panelGroup>
							#{registrarExecucaoControl.atividade.nome}
						</h:panelGroup>
						<h:panelGroup>
							Início Estimado: 
						</h:panelGroup>
						<h:panelGroup>
							<h:outputText value="#{registrarExecucaoControl.atividade.inicioEstimado}">
								<f:convertDateTime pattern="dd/MM/yyyy" />
							</h:outputText>
						</h:panelGroup>
						<h:panelGroup>
							Fim Estimado: 
						</h:panelGroup>
						<h:panelGroup>
							<h:outputText value="#{registrarExecucaoControl.atividade.fimEstimado}">
								<f:convertDateTime pattern="dd/MM/yyyy" />
							</h:outputText>
						</h:panelGroup>
					</h:panelGrid>
				</rich:panel>
				<br />
				
				<rich:panel header="Minhas Execuções">
					<h:panelGrid columns="1" columnClasses="col-links">
						<a4j:commandLink action="#{registrarExecucaoControl.novaExecucao}" execute="@this" render="popupExecucao"
							oncomplete="#{rich:component('popupExecucao')}.show()"
							rendered="#{not registrarExecucaoControl.desabilitarOperacoes}">
							<h:graphicImage library="images" name="add.png" title="Nova Execu��o" />
							Nova Execução
						</a4j:commandLink>
					</h:panelGrid>
					
					<rich:dataTable id="listaExecucoes"  
						var="execucao"
						value="#{registrarExecucaoControl.atividade.execucoes}"
						rowClasses="odd-row, even-row" 
						styleClass="stable">
						
						<f:facet name="header">
							<rich:columnGroup>
								<rich:column>Início</rich:column>
								<rich:column>Fim</rich:column>
								<rich:column>Horas</rich:column>
								<rich:column>Responsável</rich:column>
								<rich:column>Descrição</rich:column>
								<rich:column colspan="2" rendered="#{not registrarExecucaoControl.desabilitarOperacoes}">Operações</rich:column>
							</rich:columnGroup>
						</f:facet>
						
						<rich:column style="width: 10%; text-align: center;">
							<h:outputText value="#{execucao.inicio}">
								<f:convertDateTime pattern="dd/MM/yyyy" />
							</h:outputText>
						</rich:column>
						<rich:column style="width: 10%; text-align: center;">
							<h:outputText value="#{execucao.fim}">
								<f:convertDateTime pattern="dd/MM/yyyy" />
							</h:outputText>
						</rich:column>
						<rich:column style="width: 10%; text-align: center;">
							#{execucao.qtdHoras}
						</rich:column>
						<rich:column>
							#{execucao.responsavel.nomeRecurso}
						</rich:column>
						<rich:column>
							#{execucao.descricao}
						</rich:column>
						
						<rich:column style="width: 3%; text-align: center;" rendered="#{not registrarExecucaoControl.desabilitarOperacoes}">
							<a4j:commandLink execute="@this" action="#{registrarExecucaoControl.editarExecucao}"
								render="popupExecucao" oncomplete="#{rich:component('popupExecucao')}.show()">
								<h:graphicImage library="images" name="pencil.png" title="Editar Execu��o" />
								<a4j:param assignTo="#{registrarExecucaoControl.idExecucaoSelecionada}" value="#{execucao.id}" />
							</a4j:commandLink>
						</rich:column>
						
						<rich:column style="width: 3%; text-align: center;" rendered="#{not registrarExecucaoControl.desabilitarOperacoes}">
							<a4j:commandLink execute="@this" action="#{registrarExecucaoControl.excluirExecucao}" render="listaExecucoes" 
								onclick="return confirm('Tem certeza que deseja excluir a execu��o?');">
								<h:graphicImage library="images" name="delete.png" title="Excluir Execu��o" />
								<a4j:param assignTo="#{registrarExecucaoControl.idExecucaoSelecionada}" value="#{execucao.id}" />
							</a4j:commandLink>
						</rich:column>
					</rich:dataTable>
					
				</rich:panel>
				
				<h:panelGrid columns="2" styleClass="botoes">
					<h:commandButton action="#{registrarExecucaoControl.concluirAtividade}" value="Concluir Atividade" immediate="true"
						onclick="return confirm('Tem certeza que deseja concluir o a atividade?');" 
						disabled="#{registrarExecucaoControl.desabilitarOperacoes}" />
					<h:commandButton action="#{registrarExecucaoControl.iniciar}" value="Voltar" immediate="true" />
				</h:panelGrid>
				
				<rich:popupPanel id="popupExecucao" modal="true" resizeable="false" autosized="true" 
					header="Execução" domElementAttachment="form">
					
					<rich:messages globalOnly="true" showSummary="true" showDetail="true">
					</rich:messages>
					
					<h:panelGrid columns="2">
						<h:outputText value="* Início" />
						<h:panelGroup>
							<rich:calendar id="inicio" required="true" value="#{registrarExecucaoControl.inicio}"
								datePattern="dd/MM/yyyy" popup="true" />
							<rich:message for="inicio" />
						</h:panelGroup>
						
						<h:outputText value="* Fim" />
						<h:panelGroup>
							<rich:calendar id="fim" required="true" value="#{registrarExecucaoControl.fim}"
								datePattern="dd/MM/yyyy" popup="true" />
							<rich:message for="fim" />
						</h:panelGroup>
						
						<h:outputText value="* Qtd. Horas" />
						<h:panelGroup>
							<h:inputText id="horas" value="#{registrarExecucaoControl.qtdHoras}" required="true" maxlength="4" size="10">
								<f:validateLongRange minimum="1" />
							</h:inputText>
							<rich:message for="horas" />
						</h:panelGroup>
						
						<h:outputText value="Descrição" />
						<h:panelGroup>
							<h:inputTextarea id="descricao" value="#{registrarExecucaoControl.descricao}" cols="80" rows="8">
								<f:validateLength maximum="1000" />
							</h:inputTextarea>
							<rich:message for="descricao" />
						</h:panelGroup>
					</h:panelGrid>
					
					<h:panelGrid columns="2" styleClass="botoes">
						<a4j:commandButton value="Salvar" render="listaExecucoes" 
							execute="@form" action="#{registrarExecucaoControl.salvarExecucao}" 
							oncomplete="if (#{!facesContext.validationFailed and (empty facesContext.messageList)}) { #{rich:component('popupExecucao')}.hide(); }" />
							
						<h:button value="Cancelar" onclick="#{rich:component('popupExecucao')}.hide(); return false;" />
					</h:panelGrid>
					
					<rich:jQuery selector="#horas" query="mask('?9999', {placeholder: ''})" />
				</rich:popupPanel>
			</h:form>
			
			<rich:jQuery  selector=".stable tr" event="mouseover" query="jQuery(this).addClass('active-row')" />
			<rich:jQuery selector=".stable tr" event="mouseout" query="jQuery(this).removeClass('active-row')" />
		</ui:define>
		<rich:jQuery selector=".stable tr:odd" query="addClass('odd-row')" />
		<rich:jQuery selector=".stable tr:even" query="addClass('even-row')" />

	</ui:composition>

</ui:component>